<template>
  <div class="container">
    <div class="firstRow clearfix">
      <!-- 企业盒子 -->
      <div
        class="radius-16 companyBoxWrap deepShadow padding-24 fl"
        :class="{ companyWhite: needComplete, companyBack: !needComplete }"
      >
        <div class="blockTitle">企业信息</div>
        <div class="companyBoxInner radius-10">
          <div class="fl qyLogo">
            <img src="../../../static/img/indexHome/qyLogo.png" alt />
          </div>
          <div class="companyInfo fl">
            <div class="infoLinefontBold clearfix">
              <div class="fl nameLable">企业名称：&nbsp;</div>
              <div class="fl companyName">{{ companyName || '--' }}</div>
            </div>
            <div class="infoLine">
              <span>统一社会信用代码：</span>
              <span>{{ uscc || '--' }}</span>
            </div>
            <el-link
              type="danger"
              class="redColor"
              v-if="needComplete"
              @click="skipCompanyInfo"
              >完善企业信息>></el-link
            >
            <el-link
              class="moreInfo"
              type="primary"
              v-else
              @click="skipMoreInfo"
              >查看更多企业信息>></el-link
            >
          </div>
        </div>
      </div>
      <!-- 预警盒子 -->
      <div class="radius-16 alertBoxWrap deepShadow whiteBack padding-24 fl">
        <div class="blockTitle">企业预警</div>
        <ul class="clearfix">
          <li
            class="clearfix"
            :class="{ redBorder: item.num > 0 }"
            v-for="(item, index) in alertInfo"
            :key="index"
            @click="
              skipAlert(item.num, item.type, '/home/project/alertProjectList')
            "
          >
            <div class="alignCenter">
              <div class="alertIcon">
                <i :class="[item.icon, { redColor: item.num > 0 }]"></i>
              </div>
              <div>
                <span
                  :class="{ redColor: item.num > 0 }"
                  v-if="item.num < 100"
                  >{{ item.num }}</span
                >
                <span :class="{ redColor: item.num > 0 }" v-else>99+</span>
                <br />
                {{ item.title }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="secondRow clearfix">
      <!-- 专户盒子 -->
      <div class="radius-16 accountBoxWrap whiteBack deepShadow padding-24 fl">
        <div class="blockTitle">专户信息</div>
        <div class="accountBoxInner radius-10">
          <!-- 有专户信息 -->
          <div class="hasAccount radius-24" v-if="hasAccount">
            <div class="accountTop">
              <div class="topTitle fl">总代发金额：</div>
              <div class="fl accountTotal">
                <span>¥</span>
                <countTo
                  :startVal="0"
                  :endVal="accountInfo.total"
                  :duration="duration"
                ></countTo>
              </div>
            </div>
            <div class="accountBottom">
              开户银行：
              <span>{{ accountInfo.accountBank || '--' }}</span>
              <br />银行账号：
              <span v-if="!hide">{{ accountInfo.accountNum || '--' }}</span>
              <span v-else>{{
                accountInfo.accountNum | deseHandler(4, 4, '*') || '--'
              }}</span>
              <i
                class="iconfont"
                :class="{ iconyincang: hide, iconxianshi: !hide }"
                @click="showAccount"
              ></i>
            </div>
          </div>
          <!-- 无专户信息 -->
          <div class="noAccount" v-else>
            <div class="noRemind">
              <i class="iconfont iconjingshi"></i>
              您还未录入专户信息，请尽快添加！
            </div>
            <el-button
              class="commonBut submitBtn addBtn saveBtn"
              icon="iconfont icontianjia"
              @click="toAccount('/home/salary/qySalaryList')"
              ><span class="opetareText">添加专户</span></el-button
            >
          </div>
        </div>
      </div>
      <div class="radius-16 deepShadow whiteBack padding-24 employeeBoxWrap">
        <div class="blockTitle">实名制&考勤</div>
        <div v-if="hasEmployee">
          <!-- 有实名制考勤 -->
          <el-row :gutter="40">
            <el-col :span="7">
              <div class="pieBox">
                <div class="circleBox circleBacka">
                  <countTo
                    :startVal="0"
                    :endVal="employeeNum.onWork"
                    :duration="duration"
                  ></countTo>
                </div>
                <div class="circleTitle">在职员工</div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="pieBox">
                <div class="circleBox circleBackb">
                  <countTo
                    :startVal="0"
                    :endVal="employeeNum.todayWork"
                    :duration="duration"
                  ></countTo>
                </div>
                <div class="circleTitle">今日考勤员工</div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pieBox pieBoxc">
                <div class="circleBox circleBackc">
                  <span>{{ employeeNum.monthWork }}</span>
                </div>
                <div class="circleTitle">本月新增员工</div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="pieBox pieBoxc">
                <div class="circleBox circleBackd">
                  <span>{{ employeeNum.monthOut }}</span>
                </div>
                <div class="circleTitle">本月离职员工</div>
              </div>
            </el-col>
          </el-row>
          <div class="addBtn">
            <el-button
              size="medium"
              @click="addEmployee('/home/employee/employeeOn')"
              class="commonBut submitBtn saveBtn"
              icon="iconfont icontianjia"
              v-show="
                this.$store.state.buttonLimitsArr.indexOf(
                  'company:homepage:employee:add'
                ) > -1
              "
            >
              <span class="opetareText">添加人员</span>
            </el-button>
            <el-button
              size="medium"
              @click="addEmployee('/home/employee/employeeOn')"
              class="commonBut submitBtn saveBtn"
              icon="iconfont icondaochu"
              v-show="
                this.$store.state.buttonLimitsArr.indexOf(
                  'company:homepage:employee:export'
                ) > -1
              "
            >
              <span class="opetareText">导出花名册</span>
            </el-button>
          </div>
        </div>
        <!-- 无实名制考勤 -->
        <div v-else class="noEmployeeBox">
          <div class="noRemind">
            <i class="iconfont iconjingshi"></i>
            您还未录入实名制信息，请尽快添加！
          </div>
          <el-button
            class="commonBut submitBtn addBtn saveBtn"
            icon="iconfont icontianjia"
            @click="addEmployee('/home/employee/employeeOn')"
            ><span class="opetareText">添加人员</span></el-button
          >
        </div>
      </div>
    </div>
    <el-row :gutter="24">
      <!-- 工资代发 -->
      <el-col :span="15">
        <div class="radius-16 salaryBoxWrap deepShadow whiteBack padding-24">
          <div class="blockTitle">工资代发</div>
          <!-- <div class="salaryRemind" v-if="hasPayDay">
            <span>{{payDay}}</span>日为本月工资发放日，请提前制作工资表
          </div>
          <div class="salaryRemind" v-else>请在工资发放日前提前制作工资表；</div>-->
          <div class="salaryRemind" v-if="hasPayDay">
            <el-link type="primary" style="margin-top: -4px" @click="quicklySet"
              >{{ currentMonth }}月{{ payDay }}号</el-link
            >为本月工资发放日，请提前制作工资表
          </div>
          <div class="salaryRemind" v-else>
            公司尚未按照监管要求，填写工资发放日
            <el-link
              type="primary"
              style="margin-left: 16px; margin-top: -4px"
              @click="quicklySet"
              >立即设置>></el-link
            >
          </div>
          <div class="salaryStep clearfix">
            <div class="fl salaryItem">
              <img src="../../../static/img/salary/makeSalary.png" alt />
              <p>在线生成工资表或导入工资表</p>
            </div>
            <div class="fl salaryLIne">
              <img src="../../../static/img/salary/stepLine.png" alt />
            </div>
            <div class="fl salaryItem">
              <img src="../../../static/img/salary/editSalary.png" alt />
              <p>编辑工资表</p>
            </div>
            <div class="fl salaryLIne">
              <img src="../../../static/img/salary/stepLine.png" alt />
            </div>
            <div class="fl salaryItem">
              <img src="../../../static/img/salary/paySalary.png" alt />
              <p>支付并发放工资</p>
            </div>
          </div>
          <div v-if="hasEmployee && hasAccount" class="addBtn">
            <el-link type="primary" @click="downLoadSalary('salaryOperate')"
              >制作工资表教程</el-link
            >
            <el-button
              size="medium"
              class="commonBut submitBtn saveBtn"
              icon="iconfont iconzhizuogongzibiao"
              @click="toSalary('/home/salary/qySalaryList')"
              >制作工资表</el-button
            >
          </div>
          <div v-else>
            <el-button
              size="medium"
              class="submitBtn disabled addBtn"
              disabled
              icon="iconfont iconzhizuogongzibiao"
              >制作工资表</el-button
            >
          </div>
        </div>
      </el-col>
      <!-- 常用工具 -->
      <el-col :span="9">
        <div class="radius-16 toolBoxWrap deepShadow whiteBack padding-24">
          <div class="blockTitle">常用工具</div>
          <el-row :gutter="20">
            <el-col :span="6" class="toolItem">考勤查询</el-col>
            <el-col :span="12">
              <el-input
                placeholder="输入您要查询考勤的人员姓名"
                @keyup.enter.native="searchAttence"
                v-model="kqName"
              ></el-input>
            </el-col>
            <el-col :span="4" class="searchItem">
              <!-- <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchAttence"
                class="commonBtnItem"
              ></el-button> -->
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchAttence"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="toolItem">人员查询</el-col>
            <el-col :span="12">
              <el-input
                placeholder="输入您要查询信息的人员姓名"
                @keyup.enter.native="searchEmployee"
                v-model="employeeName"
              ></el-input>
            </el-col>
            <el-col :span="4" class="searchItem">
              <!-- <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchEmployee"
                class="commonBtnItem"
              ></el-button> -->
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchEmployee"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 工资发放日弹框 -->
    <el-dialog
      title="设置工资发放日"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="brand-dialog-min-width tipDialog"
      width="420px"
      :modal-append-to-body="false"
    >
      <el-form :model="formData" ref="formData">
        <el-form-item label prop="salaryDay">
          每月：
          <el-select
            placeholder="请选择"
            v-model.trim="formData.salaryDay"
            clearable
            filterable
            class="selectData1"
          >
            <el-option
              v-for="(item, index) in dataSelct"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option> </el-select
          ><span style="margin-left: 8px">日</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelEdit('formData')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveSalaryDate('formData')"
          :loading="isSaveLoading"
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 用人单位待完善弹窗 -->
    <!-- <ImproveEmployerDialog :improveDialogVisible="improveDialogVisible" @closeImproveDialog="closeImproveDialog"></ImproveEmployerDialog> -->
  </div>
</template>

<script>
//引入vue数字滚动插件vue-countTo
import countTo from 'vue-count-to'
import ImproveEmployerDialog from '@/components/enterpriseSet/ImproveEmployerDialog'

export default {
  components: { countTo, ImproveEmployerDialog },
  data() {
    return {
      improveDialogVisible: false,
      needComplete: true, //是否需要补充企业信息
      companyName: '', //企业名称
      uscc: '', //信用代码
      alertInfo: [
        {
          title: '工资拖欠预警',
          num: 0,
          icon: 'iconfont icongongzituoqianyujing1',
          type: '03',
        },
        {
          title: '使用童工预警',
          num: 0,
          icon: 'iconfont iconshiyongtonggongyujing',
          type: '02',
        },
        {
          title: '工资专户预警',
          num: 0,
          icon: 'iconfont iconzhuanhuyujing1',
          type: '01',
        },
      ],
      hasAccount: true, //是否有专户信息
      accountNum: '', //未脱敏专户账号
      accountNumHide: '', //脱敏的账户账号
      accountInfo: {
        total: '',
        accountBank: '',
        accountNum: '',
      },
      hide: true, //是否隐藏专户账号
      hasEmployee: false, //是否有实名制考勤
      kqName: '',
      employeeName: '',
      employeeNum: {
        onWork: 0, //在职人员
        todayWork: 0, //今日考勤人员数量
        monthWork: 0, //本月新增人员数量
        monthOut: 0,
      }, //实名制统计
      duration: 3000, // 需要滚动的时间
      hasPayDay: false, //没有工资发放日
      payDay: '', //工资发放日
      formData: {
        salaryDay: '',
      },
      currentMonth: '', //当前月份
      companyId: '', //公司id
      formVisible: false, // 工资发放日弹框
      isSaveLoading: false, // 保存loading
    }
  },
  created() {
    this.currentMonth = new Date().getMonth() + 1
    this.getCompanyInfo()
    this.getAccountInfo()
    this.getEmpInfo()
    this.getAlertInfo()
    this.getAttInfo()
    this.getImproveEmployer() //是否有待完善
  },
  computed: {
    dataSelct() {
      var dataSelct = []
      for (var i = 1; i <= 31; i++) {
        var obj = {}
        obj.value = i
        obj.label = i
        dataSelct.push(obj)
      }
      return dataSelct
    },
  },
  mounted() {
    //防止页面后退
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', function () {
      history.pushState(null, null, document.URL)
    })
  },
  methods: {
    closeImproveDialog() {
      this.improveDialogVisible = false
    },
    // 是否有待完善
    getImproveEmployer(type) {
      return this.axios({
        method: 'post',
        url: 'api-c/company/expand/checkcompanyarchives',
        data: {
          // type,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            // const results = response.data.result;
          } else {
            // this.improveDialogVisible = true;
            // this.$message.error(response.data.errorMsg);
            this.$confirm('贵单位档案信息未完善，请尽快去完善信息', '提示', {
              confirmButtonText: '去完善',
              cancelButtonText: '跳 过',
              type: 'warning',
            })
              .then(() => {
                // this.$message({
                //   type: 'success',
                //   message: '删除成功!'
                // });
                this.toImprove()
              })
              .catch(() => {
                // this.$message({
                //   type: 'info',
                //   message: '已取消删除'
                // });
              })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    toImprove() {
      this.$emit('closeImproveDialog')
      this.$router.push({
        path: '/home/enterpriseSet/ImproveInformation',
        name: 'ImproveInformation',
        query: { pageType: 'improve' },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseSet/employerRecordDetail',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //开启loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      return loading
    },
    closeFullScreen(loading) {
      loading.close()
    },
    //跳转补充企业信息
    skipCompanyInfo() {
      //   this.$router.push({
      //     path: "/home/enterpriseSet/employerRecordDetail",
      //     name: "employerRecordDetail",
      //     query: {
      //       routeName: "companyHome"
      //     }
      //   });
      //   this.$store.commit("CHANGE_SLIDER_NAME", {
      //     oldUrl: "/home/enterpriseSet/employerRecordDetail",
      //     newUrl: this.$router.currentRoute.fullPath
      //   });
      // 跳转完善用人单位信息
      this.$router.push({
        path: '/home/enterpriseSet/ImproveInformation',
        name: 'ImproveInformation',
        query: { pageType: 'improve' },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseSet/employerRecordDetail',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //跳转企业详情
    skipMoreInfo() {
      this.$router.push({
        path: '/home/enterpriseSet/employerRecordDetail',
        name: 'employerRecordDetail',
        query: {
          routeName: 'companyHome',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseSet/employerRecordDetail',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //预警跳转
    skipAlert(num, type, routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        if (num > 0) {
          this.$router.push({
            path: '/home/project/alertProjectList',
            name: 'alertProjectList',
            query: {
              type: type,
              state: 'nodeal',
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/attendance/qyAttendance',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          return false
        }
      }
    },
    //下载制作工资表教程
    downLoadSalary(type) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (res) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '下载失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //展示银行账号
    showAccount(e) {
      this.hide = !this.hide
      return
      if (this.accountInfo.accountNum.indexOf('*') > 0) {
        // this.accountInfo.accountNum = this.accountNum;
        this.hide = false
      } else {
        // this.accountInfo.accountNum = this.accountNumHide;
        this.hide = true
      }
    },
    //查询考勤
    searchAttence() {
      this.$router.push({
        path: '/home/attendance/qyAttendance',
        name: 'qyAttendance',
        query: {
          name: this.kqName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/attendance/qyAttendance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //查询人员
    searchEmployee() {
      this.$router.push({
        path: '/home/employee/employeeOn',
        name: 'employeeOn',
        query: {
          name: this.employeeName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeOn',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取企业信息
    getCompanyInfo() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-c/company/base/companydetail',
      })
        .then(
          (res) => {
            //comStatus：企业补录情况（0，已补录，1，未补录）
            // if (res.data.result.salaryDay === null) {
            //   vm.needComplete = true;
            // } else {
            //   vm.needComplete = false;
            // };
            //msg:用于标识企业信息是否完整，完整为1，不完整为0
            if (res.data.msg == '0') {
              vm.needComplete = true
            } else {
              vm.needComplete = false
            }
            vm.companyId = res.data.result.id
            vm.companyName = res.data.result.name
            vm.uscc = res.data.result.uscc
            vm.payDay = res.data.result.salaryDay
            vm.formData.salaryDay = vm.payDay
            if (vm.payDay) {
              vm.hasPayDay = true
            } else {
              vm.hasPayDay = false
            }
          },
          (res) => {
            this.$message.error('加载企业信息失败')
          }
        )
        .catch((error) => {
          // this.$message.error("加载企业信息失败");
        })
    },
    //获取专户信息
    getAccountInfo() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-su/companyaccount/base/findbycomid',
        data: {
          type: 'NC_BANK_TYPE',
        },
      })
        .then(
          (res) => {
            //accStatus：专户情况（0，已补录，1，未补录）
            if (res.data.result.accountId === null) {
              vm.hasAccount = false
            } else {
              vm.hasAccount = true
            }
            vm.accountNum = res.data.result.accountId
            vm.accountInfo.accountNum = vm.accountNum
            // vm.accountInfo.accountNum = vm.common.deseHandler(
            //   vm.accountNum,
            //   4,
            //   4,
            //   "*"
            // );
            // vm.accountNumHide = vm.common.deseHandler(vm.accountNum, 4, 4, "*");
            vm.accountInfo.accountBank = res.data.result.bankName
            vm.accountInfo.total = res.data.result.bankActPay
          },
          (res) => {
            this.$message.error('加载专户信息失败')
          }
        )
        .catch((error) => {
          // this.$message.error("加载专户信息失败");
        })
    },
    //获取实名制考勤信息
    getEmpInfo() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-e/nc/contract/base/empsum',
      })
        .then(
          (res) => {
            //empStatus：实名制情况（0，有实名制，1，没有实名制）
            if (res.data.result.empNum === 0) {
              vm.hasEmployee = false
            } else {
              vm.hasEmployee = true
            }
            vm.employeeNum.onWork = res.data.result.empNum
              ? res.data.result.empNum
              : 0
            vm.employeeNum.todayWork = res.data.result.attEmpNum
              ? res.data.result.attEmpNum
              : 0
            if (res.data.result.addEmpNum > 0) {
              vm.employeeNum.monthWork = '+' + res.data.result.addEmpNum
            } else {
              vm.employeeNum.monthWork = 0
            }
            if (res.data.result.exEmpNum > 0) {
              vm.employeeNum.monthOut = '-' + res.data.result.exEmpNum
            } else {
              vm.employeeNum.monthOut = 0
            }
          },
          (res) => {
            this.$message.error('加载实名制信息失败')
          }
        )
        .catch((error) => {
          // this.$message.error("加载实名制信息失败");
        })
    },
    //获取考勤信息
    getAttInfo() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-att/nc/attendance/base/attemp',
      })
        .then(
          (res) => {
            vm.employeeNum.todayWork = res.data.result.attEmpNum
              ? res.data.result.attEmpNum
              : 0
          },
          (res) => {
            this.$message.error('加载考勤信息失败')
          }
        )
        .catch((error) => {
          // this.$message.error("加载考勤信息失败");
        })
    },
    //获取预警信息
    getAlertInfo() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-a/nc/alert/base/findalertcount',
      })
        .then(
          (res) => {
            if (res.data.result.length > 0) {
              var alert = res.data.result
              for (let i = 0; i < vm.alertInfo.length; i++) {
                for (let j = 0; j < alert.length; j++) {
                  if (vm.alertInfo[i].type === alert[j].type) {
                    vm.alertInfo[i].num = alert[j].count
                  }
                }
              }
            }
          },
          (res) => {
            // this.$message.error("加载预警信息失败");
          }
        )
        .catch((error) => {
          // this.$message.error("加载预警信息失败");
        })
    },
    //添加专户
    toAccount(routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          path: '/home/salary/qySalaryList',
          name: 'qySalaryList',
          query: {
            name: this.employeeName,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/salary/qySalaryList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //添加人员
    addEmployee(routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          path: '/home/employee/employeeOn',
          name: 'employeeOn',
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/employeeOn',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //制作工资表
    toSalary(routerUrl) {
      if (this.accessControl(routerUrl) == -1) {
        this.goNoAccessPage()
      } else {
        this.$router.push({
          path: '/home/salary/qySalaryList',
          name: 'qySalaryList',
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/salary/qySalaryList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    quicklySet() {
      this.formVisible = true
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['formData'].resetFields()
    },
    // 弹框取消
    cancelEdit() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    saveSalaryDate() {
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-c/company/expand/updatesalday',
        data: {
          companyId: this.companyId,
          salaryDay: this.formData.salaryDay,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.hasPayDay = true
            this.payDay = this.formData.salaryDay
            this.$refs['formData'].resetFields()
            this.formVisible = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.outWrap {
  overflow: hidden;
}
.container {
  font-size: 14px;
  color: #333;
  position: absolute;
  padding-bottom: 24px;
  top: 106px;
  bottom: 0px;
  right: -17px;
  left: 0px;
  // min-width: 1147px;
  overflow-y: auto;
  // overflow-x: scroll;
  overflow-x: hidden;
  background: #f5f7fa !important;
  padding-bottom: 0px;
  /deep/ .el-form-item__content {
    text-align: center;
  }
  .loadingBox {
    position: absolute;
  }
  .companyWhite {
    background-color: #fff;
    color: #333;
  }
  .companyBack {
    color: #fff;
    background: url('../../../static/img/indexHome/companyBack.png') no-repeat;
    background-size: cover;
  }
  .whiteBack {
    background-color: #fff;
  }
  .padding-24 {
    padding: 22px 24px 24px;
  }
  .blockTitle {
    font-size: 18px;
    margin-bottom: 22px;
  }
  .infoLine {
    line-height: 26px;
  }
  .itemInfo {
    color: #666;
  }
  .fontBold {
    font-weight: bold;
  }
  .whiteColor {
    color: #fff;
  }
  .redColor {
    color: #e02020 !important;
  }
  .noRemind {
    color: #e02020;
    font-size: 18px;
    text-align: center;
    line-height: 200px;
    i {
      font-size: 32px;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
  .addBtn {
    position: absolute;
    right: 24px;
    bottom: 0px;
  }
  .submitBtn {
    margin-left: 24px;
    /deep/.iconfont {
      margin-right: 5px;
    }
  }
  .disabled {
    background-color: #e4ebf1;
    color: #999;
    border: 1px solid #e4ebf1 !important;
  }
  .el-col-10 {
    min-width: 450px;
  }
  .greenIcon {
    color: #009588;
  }
  .redColor {
    color: #e02020;
  }
  .firstRow {
    position: relative;
    height: 208px;
    //企业盒子样式
    .companyBoxWrap {
      width: 450px;
      height: 208px;
      .qyLogo {
        img {
          width: 60px;
          height: 60px;
        }
      }
      .companyInfo {
        width: 342px;
        padding: 0px 10px;
        .nameLable {
          width: 126px;
          text-align: right;
        }
        .companyName {
          width: 196px;
        }
        .el-link {
          margin-top: 15px;
        }
        .moreInfo {
          color: #32c5ff;
        }
        .moreInfo::after {
          border-color: #32c5ff !important;
        }
      }
    }
    // 预警盒子样式
    .alertBoxWrap {
      height: 208px;
      position: absolute;
      left: 474px;
      right: 0px;
      background: url('../../../static/img/indexHome/alertBack.png') no-repeat;
      background-size: 100% 100%;
      //background-color: #fff;
      ul {
        li {
          height: 75px;
          width: 33.3%;
          float: left;
          text-align: center;
          transition: ease-in 0.3s;
          background: linear-gradient(0, #009588 1px, #009588 1px) no-repeat,
            linear-gradient(-90deg, #009588 1px, #009588 1px) no-repeat,
            linear-gradient(-180deg, #009588 1px, #009588 1px) no-repeat,
            linear-gradient(-270deg, #009588 1px, #009588 1px) no-repeat;
          background-size: 0 1px, 1px 0, 0 1px, 1px 0;
          background-position: left top, right top, right bottom, left bottom;
          .alignCenter {
            width: 175px;
            display: inline-block;
            cursor: pointer;
            .alertIcon {
              margin-right: 20px;
              margin-top: 5px;
            }
            div {
              float: left;
              text-align: left;
              span {
                font-size: 40px;
                color: #009588;
              }
            }
            i {
              color: #009588;
              font-size: 60px;
            }
          }
        }
        li:nth-child(2) {
          border: 1px solid #dee5f4;
          border-width: 0px 1px;
        }
        li:hover {
          border: 1px solid #009588 \0;
          background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        }
        .redBorder {
          background: linear-gradient(0, #e02020 1px, #e02020 1px) no-repeat,
            linear-gradient(-90deg, #e02020 1px, #e02020 1px) no-repeat,
            linear-gradient(-180deg, #e02020 1px, #e02020 1px) no-repeat,
            linear-gradient(-270deg, #e02020 1px, #e02020 1px) no-repeat;
          background-size: 0 1px, 1px 0, 0 1px, 1px 0;
          background-position: left top, right top, right bottom, left bottom;
        }
        .redBorder:hover {
          border: 1px solid #e02020 \0;
          background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        }
      }
    }
  }

  //专户盒子
  .secondRow {
    position: relative;
    height: 370px;
    margin-top: 24px;
    .accountBoxWrap {
      position: relative;
      width: 450px;
      height: 370px;
      .accountBoxInner {
        .hasAccount {
          width: 402px;
          height: 245px;
          padding: 24px;
          color: #fff;
          background: url('../../../static/img/indexHome/accountBack.png')
            no-repeat;
          background-size: cover;
          .accountTop {
            height: 40px;
            .topTitle {
              margin-top: 16px;
            }
            .accountTotal {
              font-size: 40px;
              line-height: 50px;
            }
          }
          .accountBottom {
            line-height: 35px;
            margin-top: 82px;
            i {
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .employeeBoxWrap {
      height: 370px;
      //min-width: 560px;
      position: absolute;
      top: 0;
      left: 474px;
      right: 0px;
      background-color: #fff;
      .el-col {
        position: relative;
      }
      .el-col-7 {
        border: none;
      }
      .pieBox {
        width: 100%;
        height: 150px;
        text-align: center;
        .circleBox {
          display: inline-block;
          background-repeat: no-repeat;
          background-size: cover;
          font-size: 30px;
        }
        .circleBox:hover {
          font-size: 40px;
        }
        .circleBacka {
          width: 150px;
          height: 150px;
          line-height: 150px;
          color: #3abcc2;
          background-image: url('../../../static/img/indexHome/circleBacka.png');
          background-repeat: no-repeat;
        }
        .circleBackb {
          width: 150px;
          height: 150px;
          line-height: 150px;
          color: #3094cf;
          background-image: url('../../../static/img/indexHome/circleBackb.png');
        }
        .circleBackc {
          width: 100px;
          height: 100px;
          line-height: 100px;
          color: #ffa878;
          margin: 25px 0px;
          background-image: url('../../../static/img/indexHome/circleBackc.png');
        }
        .circleBackd {
          width: 100px;
          height: 100px;
          line-height: 100px;
          color: #73939b;
          margin: 25px 0px;
          background-image: url('../../../static/img/indexHome/circleBackd.png');
        }
        .circleTitle {
          margin-top: 10px;
        }
      }
    }
  }
  .salaryBoxWrap {
    margin-top: 24px;
    height: 352px;
    position: relative;
    .salaryRemind {
      color: #999;
    }
    .salaryStep {
      margin-top: 24px;
      .salaryItem {
        width: 15%;
        text-align: center;
        img {
          width: 100px;
          height: 100px;
        }
        p {
          text-align: left;
          margin-top: 10px;
        }
      }
      .salaryLIne {
        width: 22.5%;
        padding: 0px 10px;
        margin-top: 45px;
        img {
          width: 100%;
          height: 11px;
        }
      }
    }
    .el-link--primary {
      color: #0070f5;
      line-height: 36px;
    }
  }
  .toolBoxWrap {
    margin-top: 24px;
    height: 352px;
    .el-row {
      margin: 24px 0px;
      .toolItem {
        line-height: 36px;
        width: 90px;
        text-align: center;
      }
      /deep/ .searchItem {
        padding-left: 0 !important;
        .commonBtnItem {
          width: 36px;
          height: 36px;
          text-align: center;
          background: #009588;
          border-radius: 4px;
          padding: 0;
          border-color: #009588;
        }
      }
    }
  }
}
@media screen and (max-width: 1280px) {
  .container .firstRow .alertBoxWrap ul li .alignCenter .alertIcon i {
    font-size: 50px;
  }
  .container .firstRow .alertBoxWrap ul li .alignCenter .alertIcon {
    margin-right: 5px;
    margin-left: 7px;
  }
  .container {
    font-size: 12px;
  }
  .container .secondRow .employeeBoxWrap .pieBox .circleBox {
    width: 100%;
    background-size: 100%;
    line-height: 110px;
  }
  .container .secondRow .employeeBoxWrap .pieBoxc .circleBackc,
  .container .secondRow .employeeBoxWrap .pieBoxc .circleBackd {
    line-height: 70px;
  }
}
@import '../../../static/css/filterArea.less';

.tipDialog .selectData1 {
  width: 348px !important;
}
</style>
